<!-- 增加课程或修改课程 封面、名称、描述 -->
<template>
  <div class="second-div">
    <el-card>
      <el-form
        :model="courseForm"
        :rules="rules"
        ref="courseForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="课程封面" prop="image">
          <!-- <el-input v-model="courseForm.image"></el-input> -->
          <single-upload v-model="courseForm.image"></single-upload>
        </el-form-item>

        <el-form-item label="课程名称" prop="title">
          <el-input v-model="courseForm.title"></el-input>
        </el-form-item>

        <el-form-item label="课程简介" prop="intro">
          <el-input v-model="courseForm.intro"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('courseForm')">{{
            buttonContent
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import SingleUpload from "../../common/upload/singleUpload.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { SingleUpload },
  data() {
    //这里存放数据
    return {
      buttonContent: "",
      courseForm: {
        id: "",
        courseId: "",
        image: "",
        title: "",
        state: "发布",
        intro: "",
      },
      rules: {
        image: [{ required: true, message: "封面必选", trigger: "blur" }],
        title: [
          { required: true, message: "课程名称必填", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        intro: [
          { required: true, message: "课程描述必填", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    refresh() {
      this.setId();
      if (this.$route.query.id != 1 && this.$route.query.id != null) {
        this.buttonContent = "立即修改";
        console.log("******", this.$route.query.id, this.$route.query.title);
        this.courseForm.courseId = this.$route.query.id;
        this.courseForm.title = this.$route.query.title;
        this.courseForm.intro = this.$route.query.intro;
        this.courseForm.image = this.$route.query.image;
      } else {
        this.buttonContent = "立即创建";
        this.courseForm.courseId = "";
        this.courseForm.title = "";
        this.courseForm.intro = "";
        this.courseForm.image = "";
      }
    },
    setId() {
      this.id = this.$store.state.user.id;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$route.query.id != 1 && this.$route.query.id != null) {
            this.$http({
            url: this.$http.adornUrl(`/edu-course/updateCourse`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.courseForm.courseId,
                title: this.courseForm.title,
                image: this.courseForm.image,
                intro: this.courseForm.intro,
                state: this.courseForm.state,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 20000) {
              this.$message({
                message: "修改课程成功",
                type: "success",
              });
              this.$router.push({ name: "course" });
            } else {
              // this.$refs.slideblock.reset();
              this.$message.error("未能成功修改课程！");
            }
          });
          } else {
            this.$http({
            url: this.$http.adornUrl(`/edu-course/addCourse/${this.id}`),
            method: "post",
            data: this.$http.adornData(
              {
                title: this.courseForm.title,
                image: this.courseForm.image,
                intro: this.courseForm.intro,
                state: this.courseForm.state,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 20000) {
              this.$message({
                message: "添加课程成功",
                type: "success",
              });
               this.$store.commit("common/updateIsRefresh",false);
              this.$router.push({ name: "course",meta: {}});
            } else {
              // this.$refs.slideblock.reset();
              this.$message.error("未能成功添加课程！");
            }
          });
          }
          
        } else {
          return false;
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
   
    this.refresh();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    // this.refresh();
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.second-div {
  width: 50%;
  margin: 0 auto;
}
</style>